<template>
  <view class="quality-demo">
    <view class="demo-header">
      <text class="demo-title">品阶颜色组件演示</text>
      <text class="demo-subtitle">QualityText Component Demo</text>
    </view>

    <!-- 基础用法演示 -->
    <view class="demo-section">
      <view class="section-title">基础用法</view>
      <view class="demo-grid">
        <view class="demo-item" v-for="quality in [1,2,3,4,5]" :key="quality">
          <view class="item-label">{{ quality }}品阶</view>
          <QualityText :quality="quality" :text="`${quality}品阶道具`" />
        </view>
      </view>
    </view>

    <!-- 不同大小演示 -->
    <view class="demo-section">
      <view class="section-title">不同大小</view>
      <view class="demo-row">
        <QualityText :quality="4" text="小号文字" size="small" />
        <QualityText :quality="4" text="正常文字" size="normal" />
        <QualityText :quality="4" text="大号文字" size="large" />
      </view>
    </view>

    <!-- 加粗效果演示 -->
    <view class="demo-section">
      <view class="section-title">加粗效果</view>
      <view class="demo-row">
        <QualityText :quality="5" text="普通文字" />
        <QualityText :quality="5" text="加粗文字" :bold="true" />
      </view>
    </view>

    <!-- 使用slot演示 -->
    <view class="demo-section">
      <view class="section-title">使用Slot</view>
      <view class="demo-row">
        <QualityText :quality="3">
          <text>🗡️ 青龙偃月刀</text>
        </QualityText>
        <QualityText :quality="5" :bold="true">
          <text>⚔️ 倚天剑</text>
        </QualityText>
      </view>
    </view>

    <!-- 游戏场景演示 -->
    <view class="demo-section">
      <view class="section-title">游戏场景演示</view>
      
      <!-- 道具展示 -->
      <view class="game-section">
        <view class="game-title">道具背包</view>
        <view class="item-list">
          <view class="game-item" v-for="item in demoItems" :key="item.id">
            <text class="item-icon">{{ item.icon }}</text>
            <view class="item-info">
              <QualityText :quality="item.quality" :text="item.name" :bold="true" />
              <text class="item-desc">{{ item.description }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 伙伴展示 -->
      <view class="game-section">
        <view class="game-title">伙伴列表</view>
        <view class="partner-list">
          <view class="partner-item" v-for="partner in demoPartners" :key="partner.id">
            <text class="partner-avatar">{{ partner.avatar }}</text>
            <view class="partner-info">
              <QualityText :quality="partner.quality" :text="partner.name" size="large" :bold="true" />
              <text class="partner-level">等级 {{ partner.level }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 装备展示 -->
      <view class="game-section">
        <view class="game-title">装备系统</view>
        <view class="equipment-grid">
          <view class="equipment-slot" v-for="equipment in demoEquipments" :key="equipment.id">
            <text class="equipment-icon">{{ equipment.icon }}</text>
            <QualityText :quality="equipment.quality" :text="equipment.name" size="small" />
            <text class="equipment-level">+{{ equipment.level }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import QualityText from '@/components/QualityText.vue'

export default {
  name: 'QualityDemo',
  components: {
    QualityText
  },
  data() {
    return {
      demoItems: [
        { id: 1, name: '生命药水', quality: 1, icon: '🧪', description: '恢复少量生命值' },
        { id: 2, name: '精钢剑', quality: 2, icon: '⚔️', description: '锋利的钢制长剑' },
        { id: 3, name: '蓝宝石戒指', quality: 3, icon: '💍', description: '镶嵌蓝宝石的魔法戒指' },
        { id: 4, name: '紫金战甲', quality: 4, icon: '🛡️', description: '传说级的防护装备' },
        { id: 5, name: '龙鳞护符', quality: 5, icon: '🔮', description: '神话级的护身符' }
      ],
      demoPartners: [
        { id: 1, name: '小李飞刀', quality: 2, avatar: '🥷', level: 15 },
        { id: 2, name: '东方不败', quality: 4, avatar: '👤', level: 45 },
        { id: 3, name: '独孤求败', quality: 5, avatar: '🗡️', level: 99 }
      ],
      demoEquipments: [
        { id: 1, name: '新手剑', quality: 1, icon: '🗡️', level: 0 },
        { id: 2, name: '精钢盔', quality: 2, icon: '⛑️', level: 3 },
        { id: 3, name: '法师袍', quality: 3, icon: '👘', level: 5 },
        { id: 4, name: '龙鳞甲', quality: 4, icon: '🛡️', level: 8 },
        { id: 5, name: '神器靴', quality: 5, icon: '👢', level: 12 }
      ]
    }
  }
}
</script>

<style scoped>
.quality-demo {
  padding: 20px;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  min-height: 100vh;
  color: #ffffff;
}

.demo-header {
  text-align: center;
  margin-bottom: 30px;
}

.demo-title {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  display: block;
  margin-bottom: 8px;
}

.demo-subtitle {
  font-size: 14px;
  color: #cccccc;
  display: block;
}

.demo-section {
  margin-bottom: 30px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 15px;
  border-bottom: 2px solid #4a90e2;
  padding-bottom: 8px;
}

.demo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.demo-item {
  background: rgba(255, 255, 255, 0.08);
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  flex: 1;
  min-width: 120px;
}

.item-label {
  display: block;
  font-size: 12px;
  color: #cccccc;
  margin-bottom: 8px;
}

.demo-row {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.game-section {
  margin-bottom: 25px;
}

.game-title {
  font-size: 16px;
  font-weight: bold;
  color: #4a90e2;
  margin-bottom: 12px;
}

.item-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.game-item {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 12px;
  border-radius: 8px;
  gap: 12px;
}

.item-icon {
  font-size: 24px;
  width: 40px;
  text-align: center;
}

.item-info {
  flex: 1;
}

.item-desc {
  display: block;
  font-size: 12px;
  color: #cccccc;
  margin-top: 4px;
}

.partner-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.partner-item {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  padding: 15px;
  border-radius: 8px;
  gap: 15px;
}

.partner-avatar {
  font-size: 32px;
  width: 50px;
  text-align: center;
}

.partner-info {
  flex: 1;
}

.partner-level {
  display: block;
  font-size: 12px;
  color: #cccccc;
  margin-top: 4px;
}

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.equipment-slot {
  background: rgba(255, 255, 255, 0.05);
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.equipment-icon {
  display: block;
  font-size: 24px;
  margin-bottom: 8px;
}

.equipment-level {
  display: block;
  font-size: 10px;
  color: #cccccc;
  margin-top: 4px;
}
</style>